<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${ctx}/static/lib/layui/css/layui.css">
</head>
<body>

	<div class="demoTable">
		名字:
		<div class="layui-inline">
			<input class="layui-input" id="searchName"/>
		</div>
		副标题:
		<div class="layui-inline">
			<input class="layui-input" id="searchSubtitle"/>
		</div>
		<button class="layui-btn" data-type="search">搜索
		</button>
		<button class="layui-btn" data-type="deleteAll">
			批量删除
		</button>
		<button class="layui-btn" data-type="add">
			添加
		</button>
	</div>

	<table id="tableId" class="layui-hide" lay-filter="tableFilter"></table>

	<script type="text/html" id="barDemo">
     <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
   </script>
	
	<script src="${ctx}/static/back/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctx}/static/common/mylayer.js"></script>
	<script src="${ctx}/static/common/util.js"></script>
	<script src="${ctx}/static/lib/layui/layui.js"></script>
	<script>
		layui.use('table', function() {
			var table = layui.table;
			table.render({
			    elem: '#tableId'
			    ,url: '${ctx}/order/pageList.action' //数据接口
			    ,page: true //开启分页
			    ,id :"layUITableId"
			    ,cols: [[ //表头
			        //复选框
			      {type:'checkbox',fixed:'left'}
			    	//以下是表格内容
			      ,{field: 'id', title: '订单ID', width:80, sort: true, fixed: 'left'}
			      ,{field: 'orderNo', title: '订单号', width:80}
			      ,{field: 'userId', title: '用户ID', width:80, sort: true}
			      ,{field: 'payment', title: '实际付款', width:80} 
			      ,{field: 'paymentType', title: '支付类型', width: 177}
			      ,{field: 'postage', title: '运费(元)', width: 80, sort: true}
			      ,{field: 'status', title: '订单状态', width: 80}
			      ,{field: 'paymentTime', title: '支付时间', width: 135, sort: true}
			      ,{field: 'sendTime', title: '发货时间', width: 135, sort: true}
			      ,{field: 'endTime', title: '交易完成时间', width: 135, sort: true}
			      ,{field: 'closeTime', title: '交易关闭时间', width: 135, sort: true}
			      ,{field: 'createTime', title: '创建时间', width: 135, sort: true}
			      ,{field: 'updateTime', title: '更新时间', width: 135, sort: true}
			      ,{fixed:'right', width: 178, toolbar:'#barDemo'}
			    ]]
			  });
			
		  //监听工具条
		  //tool是工具条事件名，tableFilter是table容器属性lay-filter="tableFilter"对应的值
		  table.on('tool(tableFilter)', function(obj){
		    var data = obj.data;//获得当前行数据,json格式对象
		    var layEvent = obj.event;//获得lay-event对应的值
		    if(layEvent === 'detail'){
		      layer.msg('ID：'+ data.id + ' 的查看操作');
		    } else if(layEvent === 'del'){
		    	/*根据ID删除，通过ajax方式提交  */
		      layer.confirm('真的删除本行么', function(index){
		    	$.ajax({
		    		url:"${ctx}/order/deleteById.action",
		    		data:{"id":data.id},
		    		dataType:"json",
		    		success:function(resp) {
		    			if(resp.code == util.SUCCESS){
		    				mylayer.success(resp.msg);
		    				table.reload("layUITableId");
		    			} else {
		    				mylayer.errorMsg(resp.msg);
		    			}
			        layer.close(index);
		    		}
		    	});
		      });
		    } else if(obj.event === 'edit'){
		      layer.alert('编辑行：<br>'+ JSON.stringify(data))
		    }
		  });
	  
		/*以下整个方法都不理解啊！！  */
		var active = {
				deleteAll: function(){
					//alert("jshdkajsdh")
					var checkStatus = table.checkStatus('layUITableId')
					var data = checkStatus.data;
					console.log(data);//选中行数据
					console.log(checkStatus.data.length);//获取选中行数
					console.log(checkStatus.isAll);//表格是否全选
					var ids = util.getSelectedIds(data);
					console.log(ids);
					layer.confirm('真的要全部删除么？',function(index){
						$.ajax({
							url:"",
							data:{"ids":ids},
							dataType:"json",
							success:function(resp) {
								if (resp.code == util.SUCCESS){
									mylayer.success(resp.msg);//打印成功弹窗
									table.reload("layUITableId");//重载表格(相当于只刷新表格)
								}else{
									mylayer.errorMsg(resp.msg);
								}
								layer.close(index);
							}
						});
					});
				},
				
				//添加
				add : function() {
					location.href = "";
				}
		}
		
		$('.demoTable .layui-btn').on('click',function(){
			var type=$(this).data('type');
			active[type]?active[type].call(this):'';
		});
	});
	</script>
</body>
</html>